import Icon from '@/components/Icon'
import styled from 'styled-components'

export const StyledWrap = styled.div`
	.line-wrap {
		margin-bottom: 30px;
	}
	.duration-wrap {
		margin-bottom: 65px;
		.line {
			position: relative;
			display: flex;
			align-items: center;
			.error-tip {
				position: absolute;
				left: 0;
				top: 30px;
				color: #ff0000;
			}
		}
		.repeat-wrap {
			position: absolute;
			left: 105px;
			top: 55px;
			display: flex;
			align-items: center;
			.desc {
				margin-left: 14px;
				.modify {
					color: #007ac0;
					text-decoration: underline;
					margin-left: 8px;
					cursor: pointer;
				}
			}
		}
	}

	.mobile-wrap {
		.kd-input-error-msg,
		.kd-input-msg {
			white-space: nowrap;
		}
	}

	.brief-wrap {
		align-items: start;
		.tip {
			color: #b6b6b6;
			position: absolute;
			left: 105px;
			top: 65px;
			&.error {
				color: red;
			}
		}
	}
	.pre-number-wrap {
		.content {
			align-items: center;
		}
		.tip {
			color: #b6b6b6;
			margin-left: 30px;
		}
	}
	.room-wrap {
		.desc {
			margin-left: 10px;
			.detail {
				margin-left: 10px;
				text-decoration: underline;
				cursor: pointer;
			}
		}
	}
	.file-wrap {
		.label {
			line-height: 30px;
		}
	}
	.vip-wrap {
		align-items: start;
		.label {
			line-height: 30px;
		}
	}
`

export const UploadIcon = styled(Icon)`
	height: 30px;
	width: 30px;
	margin-left: 10px;
	background-position: -120px -305px;
	&:hover {
		background-position: -150px -305px;
	}
`

export const StyledRoomDetailPanel = styled.div`
	padding: 10px 20px;
	width: 390px;
	color: #4e4e4e;
	font-size: 12px;
	border: 1px solid #000;
	background: #ffffff;
	border-radius: 6px;
	span {
		display: inline-block;
		width: 35%;
		overflow: hidden;
		white-space: nowrap;
		text-overflow: ellipsis;
		line-height: 22px;
		&.day {
			width: 30%;
		}
	}
`
